// 简单的选项卡功能
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        // 移除所有active类
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));

        // 添加active类到当前按钮
        btn.classList.add('active');

        // 显示对应的面板
        const index = Array.from(document.querySelectorAll('.tab-btn')).indexOf(btn);
        document.querySelectorAll('.tab-panel')[index].classList.add('active');
    });
});

// 缩略图点击切换主图
document.querySelectorAll('.thumbnail').forEach(thumb => {
    thumb.addEventListener('click', () => {
        // 获取主图元素
        const mainImg = document.querySelector('.main-image');
        // 替换主图src：将缩略图路径中的尺寸标识（100x100）改为大图尺寸（600x400）
        mainImg.src = thumb.src.replace('100x100', '600x400');
    });
});

// 颜色选择
document.querySelectorAll('.color-option').forEach(option => {
    option.addEventListener('click', () => {
        document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));
        option.classList.add('active');
    });
});

// 数量增减
const quantityInput = document.querySelector('.quantity-input');
document.querySelectorAll('.quantity-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        let value = parseInt(quantityInput.value);
        if (btn.textContent === '+') {
            quantityInput.value = value + 1;
        } else if (value > 1) {
            quantityInput.value = value - 1;
        }
    });
});
